<template>
  <div class="container-y">
     <div class="box">
        <div class="img-box"><img :src="lawyerImage" alt="" class="photo"></div>
        <!-- <div class="img-box"><img src="../assets/tx-l.png" alt="" class="photo"></div> -->
        <div class="name">{{lawyerName}}</div>  
     </div>
     <div class="abstract">
        <div class="indro">简介 {{intro}}
        </div>
        <div class="old-grade">
            <span class="rate-title">综合评分:</span>
            <rater v-model="totalScore" active-color="#feba4e" :font-size="36" disabled :margin="20"></rater>
            <span class="grade">{{totalScore}}分</span>
        </div>
     </div>
     <div class="from-box">
         <div class="list">
           <div class="list-box">
               <span class="rate-title-time rate-time">响应速度:</span>
               <rater v-model="reactScore" active-color="#feba4e" :font-size="36" :margin="20"></rater>
               <span class="grade">{{reactScore}}分</span>
           </div>
           <div class="list-box">
               <span class="rate-title-time rate-work">工作态度:</span>
               <rater v-model="attitudeScore" active-color="#feba4e" :font-size="36" :margin="20"></rater>
               <span class="grade">{{attitudeScore}}分</span>
           </div>
           <div class="list-box">
               <span class="rate-title-time rate-duihua">沟通能力:</span>
               <rater v-model="communicateScore" active-color="#feba4e" :font-size="36" :margin="20"></rater>
               <span class="grade">{{communicateScore}}分</span>
           </div>
           <div class="list-box border-one">
               <span class="rate-title-time rate-hua">表达能力:</span>
               <rater v-model="expressScore" active-color="#feba4e" :font-size="36" :margin="20"></rater>
               <span class="grade">{{expressScore}}分</span>
           </div>
         </div>
         <div class="remark-box">
             <textarea name="" id="" v-model='content' cols="30" rows="10" class="remark" placeholder="您如果对律师有任何评价或建议，请在此处注明"></textarea>
         </div>
         <div class="telbox">
             <span class="tel">联系方式：</span>
             <input type="text" v-model='phone' placeholder="请填写手机号或邮箱" class="telText">
         </div>
         <div class="money-box">
             <div class="mon-box">
                 <div class="mark">¥</div>
                 <input type="number" class="mponText" v-model="reward" placeholder="打赏金额">
             </div>
         </div>
         <div class="text">为知识付费，为专业点赞</div>
         <div class="submit">
             <div class="btn" @click="handleSubmit">提交</div>
         </div>
     </div>
  </div>
</template>
<script>
import { Rater, Group, Cell, Range } from 'vux'
export default {
    components: {
        Rater,
        Group,
        Cell,
        Range
  },
  data(){
    return{
        lawyerImage: '',
        lawyerName: '',
        intro: '',
        totalScore: '',
        name: '',
        content: '服务非常到位',
        indentId:'',
        expressScore: 5,
        communicateScore: 5,
        reactScore: 5,
        attitudeScore: 5, 
        reward: 0,
        phone: '',
        lawyerId: '',
        openId: '',
        data6: 4.5,
        listQuery:{
          pageNumber: 1,
          pageSize: 100,
          param: {
            name: '',
          }
        }
    }
  },
  created(){
    let hrefUrl = window.location.href
    console.log(hrefUrl)
    console.log(this.$route)
    let data = this.$route.params.id
    this.lawyerId= data.split('&')[0];
    this.openId = data.split('&')[1];
    if(this.lawyerId){
        // this.fetchLawyerById('cfa87b16caf4485c844020f6282a5ed7')
        this.fetchLawyerById(this.lawyerId)
    }
  },
  mounted(){
    // let hrefUrl = window.location.href
    // console.log(hrefUrl)
    // console.log(this.$route)
    // let data = this.$route.params.id
    // this.lawyerId= data.split('&')[0];
    // this.openId = data.split('&')[1];
    // if(this.lawyerId){
    //     // this.fetchLawyerById('cfa87b16caf4485c844020f6282a5ed7')
    //     this.fetchLawyerById(this.lawyerId)
    // }
  },
  methods:{
    fetchLawyerById(id){
        // this.$axios.post('http://www.chenyekeji.com/law/device/lawyer/list',{}).then((res) => {
        //     console.log(res)
        // })
        // this.$axios.post('https://www.chenyekeji.com/xcx/device/user_entity/getList',{pageSize: 11, pageNumber: 1}).then((res) => {
        //     console.log(res)
        // })
        // this.$axios.post('http://172.17.1.158:8080/device/lawyer/list/'+id+'/').then((res) => {
        this.$axios.post('http://www.chenyekeji.com/law/device/lawyer/list/'+id+'/').then((res) => {
          console.log(res)
            this.totalScore = res.data.data.totalScore
            this.intro = res.data.data.context
            this.lawyerImage = res.data.data.image
            this.lawyerName = res.data.data.name
        })
    },
    handleSubmit(){
        if((this.reward)*1>0){    //先支付后评价，后更新
            this.goPay()
        }else{
            this.pingjia()
        }
    },
    goPay(){
      if(this.openId&&this.lawyerId){
        let data={
            lawyerId: this.lawyerId,
            reward: this.reward,
            openId: this.openId
        }
        this.$axios.post('http://www.chenyekeji.com/law/device/pay/',data)
        .then((res) => {
            console.log(res) 
            this.jsApiParameters=res.data.finalpackage
            // this.jsApiParameters=res.data.parameters
            this.callpay()
        })
      }else{
        alert('网络故障')
      }
    },
    callpay() {
        if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
            }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
                document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
            }
        }else{
           this.jsApiCall();
        }
    },
    jsApiCall() {
        let _this=this
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            this.jsApiParameters,
            function(res){
                WeixinJSBridge.log(res.err_msg);
                // this.$router.push({ path:'/Mypersonal'})
                if(res.err_msg == "get_brand_wcpay_request:ok"){
               // alert(res.err_code+res.err_desc+res.err_msg);
                // window.location.href="http://www.chenyekeji.com/easy-English/#/ChooseTime?order="+_this.orderId;
                // window.location.href="http://www.baidu.com"
                _this.pingjia()

            }else{
                //返回跳转到订单详情页面
                alert(支付失败);
                    
            }
            }
        );
    },
    pingjia(){
        let that = this
        let data = {
            name: '',
            content: this.content,
            indentId:'',
            expressScore: this.expressScore,
            communicateScore: this.communicateScore,
            reactScore: this.reactScore,
            attitudeScore: this.attitudeScore, 
            lawyerId: this.lawyerId,
            reward: this.reward,
            phone: this.phone
        }
        console.log(data)
        this.$axios.post('http://www.chenyekeji.com/law/device/complain/add',data).then((res) => {
            console.log(res)
            alert('评价成功')
            that.updateScore(that.lawyerId)
        })
    },
    updateScore(id){
        this.$axios.post('http://www.chenyekeji.com/law/device/lawyer/updateScore',{id}).then((res) => {
            console.log('更新评分成功')
            console.log(res)
        })
    }
  }
}
</script>
<style scoped>
.submit{
    display: flex;
     padding: 0 78px;
    justify-content: flex-end;
    padding-bottom:40px;
}
.btn{
    background: #ff4949;
    color: #fff;
    height: 54px;
    width: 130px;
    line-height: 54px;
    font-size: 26px;
    border-radius: 16px;
}
.text{
    font-size: 20px;
    color: #888888;
    padding-top:20px;
    padding-bottom: 40px;
}
.remark-box{
     padding: 0 78px;
     position: relative;
}
.money-box{
    padding: 14px 78px;
  

}
.mon-box{
   display: flex;
   border: 1px solid #ff4949;
 border-radius: 12px;
 padding: 16px 0;
}
.mark{
    height: 68px;
    width: 80px;
    line-height: 68px;
    border-right: 1px solid #929292;
    font-size: 36px;
    color: #444444;
    text-align: center;
}
.mponText{
     flex: 1;
    font-size: 36px;
    color: #aaaaaa;
    padding:0 20px;
}
.telText{
    flex: 1;
    height: 50px;
    font-size: 24px;
    color: #aaaaaa;
    background: #fafafa;
    border-radius: 8px;
    padding:0 20px;
}
.telbox{
    padding: 46px 78px;
    display: flex;
    height: 50px;
    line-height: 50px;
    align-items: center;
     position: relative;
}
.tel{
position: relative;
    line-height: 47px;
    color: #666666;
    font-size: 26px;
    padding-right: 40px;
    padding-left:46px;
}
.tel::before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
    width: 46px;
    background: url(../assets/tel.png) no-repeat center left;
    background-size: 24px;
}
.remark{
    position: relative;
    resize: none;
    height: 222px;
    width: 100%;
    color: #999999;
    font-size: 26px;
    padding-top:20px;
    padding-left:44px;
    border-bottom: 1px solid  #c9c9c9;
}
.remark-box:before{
    content: '';
    z-index: 10;
    position: absolute;
    left: 80px;
    top:20px;
    height: 50px;
    width: 46px;
    background: url(../assets/fuwu.png) no-repeat top left;
    background-size: 30px;
}
.border-one{
    border-bottom: 1px solid #c9c9c9;
    padding-bottom:20px;
}
.list{
    padding:0 78px;
}
.list-box{
    padding-top:26px;
    display: flex;
    align-items: center;
    text-align: left;
}
.grade{
    font-size:28px ;
    padding-left:36px;
    color: #777777;

}
.old-grade{
    text-align: left;
    display: flex;
    align-items: center;
    padding:16px 0;
}
.rate-title{
    position: relative;
    line-height: 57px;
    color: #666666;
    font-size: 26px;
    padding-right: 40px;
}
.rate-title-time{
    position: relative;
    line-height: 47px;
    color: #666666;
    font-size: 26px;
    padding-right: 40px;
    padding-left:46px;
}
.rate-time::before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
    width: 46px;
    background: url(../assets/time-icon.png) no-repeat center left;
    background-size: 24px;
}
.rate-hua:before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
    width: 46px;
    background: url(../assets/hua.png) no-repeat center left;
    background-size: 24px;
}
.rate-work::before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
    width: 46px;
    background: url(../assets/work-icon.png) no-repeat center left;
    background-size: 24px;
}
.rate-duihua::before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
    width: 46px;
    background: url(../assets/duihua.png) no-repeat center left;
    background-size: 24px;
}
.abstract{
  padding-left:121px;
  padding-right: 80px;
  background: #fafafa;
  border-bottom: 10px solid #eeeeee;
}
.indro{
    padding-top:30px;
    height: 138px;

     text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    text-overflow:ellipsis;
  /*height: 76px;*/
    color: #999999;
    font-size: 26px;
    overflow: hidden;
}
.title{
  font-size: 26px;
  color: #666666;
}
.box{
    height: 270px;
    padding-top:66px;
    background: #fff;
    display: flex;
    align-items: center;
    flex-flow: column;
}
.img-box{
  height:120px;
  width:120px;
  border-radius: 100%;
  border: 6px solid #e6e6e6;
  box-sizing: border-box;
}
.img-box .photo{
    /*min-height: 100%;*/
    height: 100%;
    width: 100%;
    border-radius: 100%;
}
.name{
    font-size: 28px;
    padding-top:10px;
    padding-bottom:10px;
    color: #444444;
}
</style>











